﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="SoundSynthLab.InstrumentEditor"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SoundSynthLab"
    xmlns:common="using:SoundSynthLab.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Controls="using:SoundSynthLab.Controls"
    mc:Ignorable="d" Loaded="pageRoot_Loaded">

    <Page.Resources>
        <common:CentileConverter x:Key="CentileConv"/>
        <common:MiliConverter x:Key="MiliConv"/>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid  Style="{StaticResource LayoutRootStyle}">
        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnSnapped" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnNormal" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="ColumnSnapped" Width="0"/>
            <ColumnDefinition x:Name="ColumnNormal" Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0">

        </Grid>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!-- Back button and page title -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
                <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
            </Grid>
            <Grid Grid.Row="1">
                <Grid.RowDefinitions>

                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Button Name="btnOpen" Content="Open" FontSize="30" Margin="10" Click="btnOpen_Click"/>
                    <Button Name="btnSave" Content="Save" Grid.Column="1" FontSize="30" Margin="10" Click="btnSave_Click"/>
                    <Grid Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" Margin="20,0,20,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="150"/>
                        </Grid.RowDefinitions>
                        <StackPanel VerticalAlignment="Stretch">
                        <Grid Name="GridOscillator" Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="20"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="20"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Button Name="BtnDelete" Grid.Column="1" Content="Delete oscillator" FontSize="20" Click="BtnDelete_Click" Margin="10" />

                            <TextBlock Text="Frequency Ratio :" Grid.Row="2" FontSize="30" Margin="10"/>
                            <Slider Grid.Row="2" Grid.Column="1" Minimum="-60" Maximum="60" 
                                    Value="{Binding Path=Pitch,Mode=TwoWay}" ValueChanged="UpdatePreset" Margin="10,10,10,0"/>

                            <TextBlock Text="Amplitude :" Grid.Column="3" Grid.Row="2" FontSize="30" Margin="10"/>
                            <Slider Grid.Row="2" Grid.Column="4" Minimum="0" Maximum="100" 
                                    Value="{Binding Path=Amplitude,Converter={StaticResource CentileConv},Mode=TwoWay}" ValueChanged="UpdatePreset" Margin="10,10,10,0"/>



                            <TextBlock Text="Inverted :" Grid.Row="3" FontSize="30" Margin="10"/>
                            <CheckBox Grid.Row="3" Grid.Column="1"  Height="40" Width="40" IsChecked="{Binding Path:Invert,Mode=TwoWay}" HorizontalAlignment="Left" Margin="10" Checked="UpdatePreset" Unchecked="UpdatePreset" Name="ChkInvert"/>

                            <TextBlock Text="Offset :" Grid.Column="3" Grid.Row="3" FontSize="30" Margin="10"/>
                            <Slider Grid.Row="3" Grid.Column="4" Minimum="-100" Maximum="100" 
                                    Value="{Binding Path=Offset,Converter={StaticResource CentileConv},Mode=TwoWay}" ValueChanged="UpdatePreset" Margin="10,10,10,0"/>
                            <TextBlock Text="FMIndex :" Grid.Column="3" Grid.Row="4" FontSize="30" Margin="10"/>
                                <Slider Grid.Row="4" Grid.Column="4" Minimum="0" Maximum="1000" 
                                    Value="{Binding Path=FMIndex,Converter={StaticResource CentileConv},Mode=TwoWay}" ValueChanged="UpdatePreset" Margin="10,10,10,0"/>
                            </Grid>
                        </StackPanel>
                            <Grid Grid.Row="1" VerticalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Canvas Name="CanvasWave" Grid.Column="0"  Background="CornflowerBlue" Margin="10"/>
                            <Grid Grid.Column="1">

                            </Grid>
                        </Grid>
                    </Grid>

                    <Grid Grid.Row="1" Grid.ColumnSpan="2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="14*"/>
                            <ColumnDefinition Width="27*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock  Grid.Row="0" Text="Oscillators" FontSize="30" Margin="10" Grid.ColumnSpan="2"/>
                        <Button Grid.Row="0" Content="Add" FontSize="20" Name="btnAddOscillator" HorizontalAlignment="Right" Click="btnAddOscillator_Click" Grid.Column="1" Margin="0,6,0,5"/>
                        <ListView Name="ListOscillators" Grid.Row="1" DisplayMemberPath="Name" SelectionChanged="ListOscillators_SelectionChanged" Grid.ColumnSpan="2" />
                    </Grid>
                </Grid>

                <Controls:AnimatedKeyboard Grid.Row="2" Height="200" NoteReleased="AnimatedKeyboard_NoteReleased" NotePressed="AnimatedKeyboard_NotePressed"/>
            </Grid>

        </Grid>
    </Grid>
</common:LayoutAwarePage>
